<template>
  <div class="statistics-management">
    <div class="page-header">
      <div class="header-title">数据统计</div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="data-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>今日销售额</span>
              </div>
            </template>
            <div class="card-value">¥{{ todaySales }}</div>
            <div class="card-footer">
              较昨日 <span class="up">+15.2%</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>今日订单数</span>
              </div>
            </template>
            <div class="card-value">{{ todayOrders }}</div>
            <div class="card-footer">
              较昨日 <span class="down">-5.2%</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>商品总数</span>
              </div>
            </template>
            <div class="card-value">{{ totalProducts }}</div>
            <div class="card-footer">
              本月新增 <span class="up">+12</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>访客数</span>
              </div>
            </template>
            <div class="card-value">{{ visitors }}</div>
            <div class="card-footer">
              较昨日 <span class="up">+8.5%</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 销售趋势图表 -->
    <div class="sales-trend">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>销售趋势</span>
            <el-radio-group v-model="timeRange" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <!-- 这里可以添加图表组件 -->
        <div class="chart-placeholder">
          图表区域（需要集成图表库如 ECharts）
        </div>
      </el-card>
    </div>

    <!-- 热销商品排行 -->
    <div class="hot-products">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>热销商品排行</span>
          </div>
        </template>
        <el-table :data="hotProducts" style="width: 100%">
          <el-table-column prop="rank" label="排名" width="80" />
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="sales" label="销量" width="120" />
          <el-table-column prop="amount" label="销售额" width="120">
            <template #default="scope">
              ¥{{ scope.row.amount }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const todaySales = ref(12345.67);
const todayOrders = ref(156);
const totalProducts = ref(324);
const visitors = ref(1234);
const timeRange = ref('week');

const hotProducts = ref([
  { rank: 1, name: '夹心饼干', sales: 235, amount: 2350.00 },
  { rank: 2, name: '曲奇饼干', sales: 189, amount: 1890.00 },
  { rank: 3, name: '威化饼干', sales: 156, amount: 1560.00 },
  { rank: 4, name: '苏打饼干', sales: 145, amount: 1450.00 },
  { rank: 5, name: '巧克力饼干', sales: 134, amount: 1340.00 },
]);
</script>

<style scoped>
.statistics-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2f3d;
}

.data-overview {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin: 10px 0;
}

.card-footer {
  font-size: 14px;
  color: #909399;
}

.up {
  color: #67c23a;
}

.down {
  color: #f56c6c;
}

.sales-trend {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
  border-radius: 4px;
}

.hot-products {
  margin-bottom: 20px;
}

:deep(.el-card__header) {
  padding: 15px 20px;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>